<template>
	<view v-if="showAddInvoice">
		<uni-popup
			ref="addInvoiceRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title">
					报销明细
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="popup-contents">
					<uni-forms :modelValue="formValue" ref="form">
						<view class="form-item-card">
							<uni-forms-item>
								<view class="title">报销类别</view>
								<view class="bankContet">
									<uni-data-checkbox
										v-model="formValue.secondId"
										:localdata="secondaryList"
										@change="changeSecondId"
									></uni-data-checkbox>
								</view>
								<view class="emptyAll"></view>
							</uni-forms-item>
						</view>
						<view class="form-item-card mt20">
							<view
								v-for="(
									value, key, index
								) in formValue.threeObj"
								:key="index"
							>
								<view class="fee-box-bottom">
									<uni-forms-item>
										<view class="title">费用明细</view>
										<view class="bankContet">
											<uni-data-checkbox
												v-model="
													formValue.threeObj[key].code
												"
												:localdata="threeList"
											></uni-data-checkbox>
										</view>
										<view class="emptyAll"></view>
									</uni-forms-item>
								</view>
								<uni-forms-item>
									<view>
										<view class="df jsb ac">
											<view class="title">报销凭证</view>
											<view class="bankContet">
												<view
													@tap="
														handlerUploadFile(key)
													"
												>
													<uni-icons
														type="plus"
														color="#2E95FF"
														size="26"
													></uni-icons>
												</view>
											</view>
										</view>
										<view
											v-for="(
												list, listIndex
											) in formValue.threeObj[key]
												.fileList"
											:key="listIndex"
											class="fileList mb20"
											@tap="
												lookFile(
													list.url,
													list.fileType
												)
											"
										>
											<view class="df jsb ac">
												<view class="imgShow df ac">
													<image
														:src="list.url"
														class="image"
														v-if="
															list.fileType ===
															'image'
														"
													></image>
													<image
														src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/tnaucezgozuvvaahwp3cfmgpj.png"
														class="image"
														v-else
													></image>
													<view>
														<view
															class="fileName"
															>{{
																getFileName(
																	list.name ||
																		list.path
																)
															}}</view
														>
														<view
															class="fileSize"
															>{{
																getSize(
																	list.size
																)
															}}</view
														>
													</view>
												</view>
												<view class="total-amount">{{
													list.totalAmount
												}}</view>
												<view
													class="delete"
													@tap.stop="
														handlerDelete(
															key,
															listIndex
														)
													"
												></view>
											</view>
											<view
												class="df tagList"
												v-if="
													list.tags &&
													list.tags.length > 0
												"
											>
												<view
													v-for="(
														tag, tagIndex
													) in list.tags"
													:key="tagIndex"
													class="tags df"
													:class="[mate(tag)]"
												>
													<image
														v-if="!mate(tag)"
														src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/8d1s74qzjffc7gzc03lk30maa.png"
														style="
															width: 30rpx;
															height: 30rpx;
														"
														class="dsb mt10 mr10"
													></image>
													<view
														class="flex-1 df flw"
														>{{ tag }}</view
													>
												</view>
											</view>
										</view>
									</view>
									<view
										class="delThree df jsc ac"
										v-if="
											Object.keys(formValue.threeObj)
												.length > 1
										"
										@tap="handlerDel(key)"
										>删除</view
									>
									<view class="emptyAll"></view>
								</uni-forms-item>
							</view>
						</view>
						<view
							class="df jsc add-box mb20 mt20"
							@click="handlerAdd"
						>
							<view class="add"
								><uni-icons
									type="plusempty"
									color="#4095e5"
									size="20"
								></uni-icons
								>添加费用明细</view
							>
						</view>
						<view class="mt20 w95">
							<uni-forms-item>
								<view class="title">报销金额</view>
								<uni-easyinput
									:placeholderStyle="placeholderStyle"
									ref="form"
									class="uni-mt-5"
									trim="all"
									v-model="formValue.totalAmount"
									placeholder="报销金额"
								></uni-easyinput>
								<view class="emptyAll"></view>
							</uni-forms-item>
						</view>
						<view class="w95">
							<uni-forms-item>
								<view class="title">发票金额</view>
								<uni-easyinput
									:placeholderStyle="placeholderStyle"
									disabled
									ref="form"
									class="uni-mt-5"
									trim="all"
									v-model="formValue.invoiceAmount"
									placeholder="发票金额"
								></uni-easyinput>
								<view class="emptyAll"></view>
							</uni-forms-item>
						</view>
						<view class="w95">
							<uni-forms-item>
								<view class="title">纠正发票金额</view>
								<uni-easyinput
									:placeholderStyle="placeholderStyle"
									ref="form"
									class="uni-mt-5"
									trim="all"
									v-model="formValue.checkInvoiceAmount"
									placeholder="纠正发票金额"
								></uni-easyinput>
								<view class="emptyAll"></view>
							</uni-forms-item>
						</view>
						<!-- <view class="df ac addThree jse">
              <text class="text">还有其他三级报销类别？点击</text>
              <view class="add" @tap="handlerAdd">添加</view>
            </view> -->
					</uni-forms>
					<view class="duo"></view>
				</scroll-view>
			</view>
			<view class="bottom-button-bd df ac jse">
				<button
					class="primary-button w40 primary-cancle"
					@click="handlerCancle"
				>
					取消
				</button>
				<button
					:class="isClick ? '' : 'disable'"
					class="primary-button w40"
					@tap.stop="handlerSure"
				>
					保存
				</button>
			</view>
		</uni-popup>
		<select-pick
			:title="title"
			:showPick="showPick"
			@close="close"
			@submit="submit"
			:list="list"
		></select-pick>
		<select-file-type
			v-if="show"
			:show="show"
			@close="handlerUploadColse"
			@handlerSelectType="handlerSelectTypeFile"
			@handlerSelectFile="handlerSelectFile"
		></select-file-type>
	</view>
</template>
<script>
import {
	findcostCategoryList,
	invoice,
	invoiceAmount,
} from '@/subPackagesIndex/pages/index/approval/launch/apis/reimbursement.js'
import selectPick from '@/components/select-pick/select-pick.vue'
import selectFileType from '@/components/select-fileType/select-fileType.vue'
import { uuid, formatSizeUnits, getFileName } from '@/common/utils'
export default {
	props: {
		showAddInvoice: {
			type: Boolean,
			default: false,
		},
		infoData: {
			type: Object,
			default: () => {},
		},
		billFileList: {
			type: Array,
			default: () => [],
		},
	},
	components: {
		selectPick,
		selectFileType,
	},
	data() {
		return {
			getFileName,
			show: false,
			selectKey: '',
			showPick: false,
			type: '',
			begin: '',
			end: '',
			title: '',
			total: 0,
			formValue: {
				secondId: '',
				secondName: '',
				totalAmount: '',
				invoiceAmount: '',
				overAmount: '',
				checkInvoiceAmount: '',
				fileLength: 0,
				threeObj: {},
			},
			list: [],
			secondaryList: [],
			threeList: [],
			secondaryId: '',
			placeholderStyle: 'color:#b2b2b2;font-size:26rpx;',
			selectFileKey: '',
			oldSecondId: '',
		}
	},
	onReady() {},
	mounted() {},
	computed: {
		varifyInvoiceVOList() {
			return this.$store.state.VarifyInvoiceVOList
		},
		secondId() {
			return this.formValue.secondId
		},
		billList() {
			const listObj = this.formValue.threeObj
			let newList = []
			for (let key in listObj) {
				newList = [...newList, ...listObj[key].fileList]
			}
			return newList
		},
		isClick() {
			const hasData =
				this.formValue.secondId && this.formValue.totalAmount
			return this.isBillOver() && hasData
		},
		billLength() {
			const listObj = this.formValue.threeObj
			let len = 0
			for (let key in listObj) {
				len += listObj[key].fileList.length
			}
			return len
		},
	},
	methods: {
		isBillOver() {
			const threeObj = this.formValue?.threeObj
			for (let key in threeObj) {
				const obj = threeObj[key]
				const fileList = obj.fileList
				if (!obj.code) {
					return false
				} else if (fileList.length === 0) {
					return false
				} else if (!this.verifyInvoice(fileList)) {
					return false
				}
			}
			return true
		},
		verifyInvoice(fileList) {
			for (let item of fileList) {
				let tag = ''
				if (item.tags && item.tags.length > 0) {
					tag = item.tags[item.tags.length - 1]
				}
				if (tag.indexOf('他人发票') > -1) {
					return false
				} else if (tag.indexOf('抬头不一致') > -1) {
					return false
				} else if (tag.indexOf('发票逾期') > -1) {
					return false
				} else if (tag.indexOf('发票已使用') > -1) {
					return false
				} else if (tag.indexOf('验真失败') > -1) {
					return false
				} else if (tag.indexOf('发票重复') > -1) {
					return false
				} else if (tag.indexOf('非企业员工发票') > -1) {
					return false
				}
			}
			return true
		},
		openPopup() {
			this.$refs.addInvoiceRef.open('bottom')
			this.getCategoryList()
		},
		getCategoryList() {
			const parentId = this.$store.state.invoiceInfo.parentId
			findcostCategoryList({ parentId }).then((res) => {
				let list = res.data?.length > 0 ? res.data : []
				this.secondaryList = this.changeDataList(list)
				this.formValue.secondId = this.secondaryList[0].value
			})
		},
		getThreeList(val) {
			findcostCategoryList({ parentId: val }).then((res) => {
				let list = res.data?.length > 0 ? res.data : []
				this.threeList = this.changeData(list)
			})
		},
		closePopup() {
			let obj = {
				secondId: '',
				secondName: '',
				totalAmount: '',
				invoiceAmount: '',
				fileLength: 0,
				threeObj: {},
			}
			this.formValue = JSON.parse(JSON.stringify(obj))
			this.$refs.addInvoiceRef.close()
			this.$emit('close')
		},
		handlerSure() {
			if (!this.isClick) {
				return
			}
			let timeAreaId = this.$store.state.timeAreaId
			let formData = this.$store.state.formData
			let time = formData[timeAreaId]
			let type = this.$store.state.invoiceInfo.type
			let parentId = this.$store.state.invoiceInfo.parentId
			let secondId = this.formValue.secondId
			let totalAmount = this.formValue.totalAmount
			let checkInvoiceAmount = this.formValue.checkInvoiceAmount
			let begin = ''
			let end = ''
			let that = this
			this.formValue.overAmount = this.formValue.totalAmount
			if (time && time[0] !== '' && time[1] !== '') {
				begin = time[0]
				end = time[1]
			} else {
				let nowMonth = this.getAlldate()
				begin = nowMonth[0]
				end = nowMonth[1]
			}
			this.formValue.fileLength = this.billLength
			invoiceAmount({
				type,
				parentId,
				secondId,
				totalAmount,
				begin,
				end,
				checkInvoiceAmount,
			}).then((res) => {
				let data = res.data
				if (!data.overAmount && !data.overInvoiceAmount) {
					this.$emit('handlerSave', this.formValue)
					this.formValue = {
						secondId: '',
						secondName: '',
						totalAmount: '',
						invoiceAmount: '',
						checkInvoiceAmount: '',
						fileLength: 0,
						threeObj: {},
					}
					this.closePopup()
				} else if (data.overAmount && data.overSet) {
					uni.showModal({
						title: '',
						content:
							'当前提交报销金额大于本类目报销设定金额是否提交',
						success(res) {
							if (res.confirm) {
								that.$emit('handlerSave', that.formValue)
								that.closePopup()
							} else if (res.cancel) {
								/* that.formValue.totalAmount = data.amount;
                that.total = data.amount; */
							}
						},
					})
				} else if (data.overAmount && !data.overSet) {
					uni.showModal({
						title: '',
						showCancel: false,
						content:
							'报销金额大于设定报销类目金额,已自动填充该类目最大金额',
						confirmText: '知道了',
						success: function () {
							that.formValue.totalAmount = data.amount
							that.total = data.amount
							that.$emit('handlerSave', that.formValue)
							that.closePopup()
						},
					})
				} else if (data.overInvoiceAmount) {
					uni.showModal({
						title: '',
						showCancel: false,
						content:
							'报销金额超过发票金额,已自动填充报销金额为发票金额',
						confirmText: '知道了',
						success: function () {
							that.formValue.totalAmount =
								that.formValue.invoiceAmount
							that.total = that.formValue.invoiceAmount
							that.$emit('handlerSave', that.formValue)
							that.closePopup()
						},
					})
				}
			})
		},
		//获取月份
		getAlldate(item) {
			console.log(item)
			let now = new Date() //当前日期
			let year = now.getFullYear()
			let month = now.getMonth()
			let startDate = new Date(year, month, 1)
			let endDate = new Date(year, month + 1, 0)
			let start_time = this.formatDate(startDate)
			let end_time = this.formatDate(endDate)
			return [start_time, end_time]
		},
		// 格式化日期
		formatDate(date) {
			var myyear = date.getFullYear()
			var mymonth = date.getMonth() + 1
			var myweekday = date.getDate()

			if (mymonth < 10) {
				mymonth = '0' + mymonth
			}
			if (myweekday < 10) {
				myweekday = '0' + myweekday
			}
			return myyear + '-' + mymonth + '-' + myweekday
		},
		handlerUploadColse() {
			this.show = false
		},
		handlerUploadFile(key) {
			const code = this.formValue.threeObj[key]?.code
			if (!code) {
				return uni.showToast({
					title: `请先选择费用明细`,
					icon: 'none',
				})
			}
			this.show = true
			this.selectFileKey = key
		},
		handlerSelectTypeFile(type) {
			this.uploadFile(this.selectFileKey, type)
		},
		handlerSelectFile() {
			this.uploadFileCopy(this.selectFileKey)
		},
		uploadFile(key, type) {
			const code = this.formValue.threeObj[key]?.code
			const _that = this
			wx.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: [type],
				success(res) {
					const list = res.tempFiles.map((i) => {
						return {
							...i,
							tempFilePath: i.path,
						}
					})
					_that.addUpload(list, code, key)
				},
			})
		},
		uploadFileCopy(key) {
			const code = this.formValue.threeObj[key]?.code
			const _that = this
			wx.chooseMessageFile({
				type: 'file',
				success(res) {
					const list = res.tempFiles.map((i) => {
						return {
							...i,
							tempFilePath: i.path,
						}
					})
					_that.addUpload(list, code, key)
				},
			})
		},
		addUpload(list, code, key) {
			uni.showLoading({
				title: '上传中...',
			})
			let _that = this
			if (list.length) {
				list.forEach((item, index) => {
					//这里之所以循环一个一个上传是因为，我是用于小程序端的，目前uniapp不支持微信小程序以文件列表形式上传，
					uni.uploadFile({
						url:
							getApp().globalData.uploadDomain +
							'oss-web/oss/upload/file?asyn=false',
						filePath: item.tempFilePath,
						name: 'file',
						header: {
							tenantId: uni.getStorageSync('orgId'),
							Authorization: uni.getStorageSync('token'),
							reqChannel: getApp().globalData.reqChannel,
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data)
							if (res.success) {
								let data = res.data
								let type = data.originalName.split('.')[1]
								let fileType = this.judgeType(type)
								let id = uuid()
								let fileInfo = {
									...item,
									...data,
									code,
									id,
									fileType,
								}
								if (
									fileType === 'image' ||
									fileType === 'pdf'
								) {
									invoice({
										code,
										fileType,
										fileUrl: fileInfo.url,
									}).then((res) => {
										uni.hideLoading()
										let data = res.data
										let info = { ...data, ...fileInfo }
										let billList = _that.billList
										let obj = _that.formValue.threeObj[key]
										let isBill = _that.judgingBill(
											info.invoiceNum,
											info.ticketNumber,
											billList
										)
										//info = { ...info, tags: [""] };
										if (isBill) {
											info = {
												...info,
												tags: [
													...info.tags,
													'发票重复：当前审批单中已存在相同发票，请勿重复上传',
												],
											}
										}
										/* if (
                      (info.tags && info.tags.length === 0) ||
                      info.tags.indexOf("验真成功") > -1
                    ) {
                    } */
										const totalAmount = data.totalAmount
											? data.totalAmount
											: '0'
										let total =
											(parseFloat(_that.total) * 100 +
												parseFloat(totalAmount) * 100) /
											100
										_that.total = total.toFixed(2)
										_that.formValue.totalAmount =
											_that.total
										_that.formValue.invoiceAmount =
											_that.total
										_that.formValue.checkInvoiceAmount =
											_that.total
										_that.$set(obj, 'fileList', [
											...obj.fileList,
											info,
										])
									})
								} else {
									uni.hideLoading()
									uni.showToast({
										title: `只支持图片或者pdf格式`,
										icon: 'none',
									})
								}
								//this.uploadList.push({ ...item, ...data });
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.message
										? res.message
										: '上传失败~',
									icon: 'error',
								})
							}
						},
						fail(err) {
							console.log(err)
						},
					})
				})
			}
		},
		//判断票据是否重复
		judgingBill(invoiceNum, ticketNumber, list) {
			let isBill = false
			let createList = JSON.parse(JSON.stringify(list))
			let copyList = createList.concat(...this.billFileList)
			console.log('111:', createList, copyList)
			for (let item of copyList) {
				console.log(
					'item:',
					item.invoiceNum + item.ticketNumber ===
						invoiceNum + ticketNumber
				)
				if (
					item.invoiceNum + item.ticketNumber ===
					invoiceNum + ticketNumber
				) {
					isBill = true
				}
			}
			console.log('isBill:', isBill)
			return isBill
		},
		//添加
		handlerAdd() {
			let uuidKey = uuid()
			console.log(uuidKey, '--uuidKey')
			this.$set(this.formValue, 'threeObj', {
				...this.formValue.threeObj,
				[uuidKey]: {
					code: '',
					fileList: [],
				},
			})
		},
		//删除
		handlerDel(key) {
			this.$delete(this.formValue.threeObj, [key])
		},
		//判定类型
		judgeType(type) {
			const typeCopy = type.toUpperCase()
			const imgType = [
				'GIF',
				'JPG',
				'JPEG',
				'PNG',
				'BASE64',
				'SVG',
				'APNG',
				'WEBP',
			]
			const fileFdf = ['PDF']
			let fileType = ''
			if (imgType.indexOf(typeCopy) > -1) {
				fileType = 'image'
			} else if (fileFdf.indexOf(typeCopy) > -1) {
				fileType = 'pdf'
			}
			return fileType
		},
		mate(text) {
			let className = ''
			if (text === '他人发票') {
				className = 'trfp'
			} else if (text === '抬头不一致') {
				className = 'ttbyz'
			} else if (text === '发票逾期') {
				className = 'fpyq'
			} else if (text === '发票已使用') {
				className = 'fpysy'
			} else if (text === '验真失败') {
				className = 'yzsb'
			} else if (text === '发票重复') {
				className = 'fpcf'
			} else if (text === '非企业员工发票') {
				className = 'fqyygfp'
			} else if (text === '验真成功') {
				className = 'yzcg'
			}
			return className
		},
		//转换为大小
		getSize(size) {
			return formatSizeUnits(size)
		},
		//选择类别
		handlerSelectType(type, key) {
			this.type = type
			if (type === '2') {
				this.title = '二级费用类别'
				this.changeList()
			} else if (type === '3') {
				this.title = '三级费用类别'
				if (!this.formValue.secondId) {
					return uni.showToast({
						title: `请先选择二级费用类别`,
						icon: 'none',
					})
				}
				this.changeList()
				this.selectKey = key
			}
		},
		//改变下拉列表
		changeList() {
			if (this.type === '2') {
				this.list = this.secondaryList
			} else if (this.type === '3') {
				this.list = this.threeList
			}
			setTimeout(() => {
				this.showPick = true
			}, 50)
		},
		//改变数据
		changeDataList(list) {
			const newList = list.map((item) => {
				item.value = item.id
				item.text = item.name
				return item
			})
			return newList
		},
		//改变数据列表
		changeData(list) {
			const newList = list.map((item) => {
				item.value = item.code
				item.text = item.name
				return item
			})
			return newList
		},
		//删除数据列表
		handlerDelete(key, listIndex) {
			let obj = this.formValue.threeObj[key]
			//let tags = obj.fileList[listIndex].tags;
			let fileObj = obj.fileList[listIndex]
			/*  if (tags.length === 0 || tags.indexOf("验真成功") > -1) {
      } */
			let totalAmount = fileObj.totalAmount ? fileObj.totalAmount : '0'
			let total =
				(parseFloat(this.total) * 100 - parseFloat(totalAmount) * 100) /
				100
			this.total = total.toFixed(2)
			this.formValue.totalAmount = this.total
			this.formValue.invoiceAmount = this.total
			this.formValue.checkInvoiceAmount = this.total
			obj.fileList.splice(listIndex, 1)
		},
		close() {
			this.showPick = false
		},
		submit(value) {
			let that = this
			if (this.type === '2') {
				if (
					this.formValue.secondId &&
					this.formValue.secondId !== value
				) {
					uni.showModal({
						title: '温馨提示',
						content: '修改二级费用类别会导致三级费用类别置空！',
						success(res) {
							that.$set(that.formValue, 'secondId', value)
							let name = ''
							that.secondaryList.forEach((item) => {
								if (item.id === that.formValue.secondId) {
									name = item.name
								}
							})
							that.formValue.secondName = name
							that.getThreeList()
							let threeObj = that.formValue.threeObj
							let newObj = {}
							for (let key in threeObj) {
								let obj = threeObj[key]
								obj.code = ''
								newObj[key] = obj
							}
							that.$set(that.formValue, 'threeObj', newObj)
							console.log(that.formValue)
						},
					})
				} else {
					this.$set(this.formValue, 'secondId', value)
					let name = ''
					this.secondaryList.forEach((item) => {
						if (item.id === this.formValue.secondId) {
							name = item.name
						}
					})
					this.formValue.secondName = name
					this.getThreeList()
				}
			} else if (this.type === '3') {
				let threeObj = this.formValue.threeObj[this.selectKey]
				this.$set(threeObj, 'code', value)
			}
			this.close()
		},
		//查看pdf
		lookFile(url, fileType) {
			if (fileType === 'image') {
				wx.previewImage({
					current: url, //当前的图片路径
					urls: [
						// 所有图片的URL列表，数组格式   预览图片路径
						url,
					],
					success: function (res) {
						console.log(res)
					},
				})
			} else if (fileType === 'pdf') {
				wx.downloadFile({
					url, //示例的url地址
					success: function (resinfo) {
						let path = resinfo.tempFilePath
						wx.openDocument({
							filePath: path,
							fileType: 'pdf',
							success: function (rest) {
								console.log(rest)
							},
							fail: function (error) {
								wx.showToast({
									icon: 'none',
									title: '打开文件失败',
								})
							},
						})
					},
					fail: function (err) {
						console.log('fail')
						console.log(err)
						wx.showToast({
							icon: 'none',
							title: '下载文件失败',
						})
					},
				})
			}
		},
		//取消
		handlerCancle() {
			this.closePopup()
		},
		changeSecondId(e) {
			const newVal = e.detail.value
			const that = this
			if (newVal) {
				uni.showModal({
					title: '温馨提示',
					content:
						'修改报销类别会导致已填写的费用明细及凭证被清空，请确认是否修改？',
					cancelText: '取消', // 取消按钮的文字
					confirmText: '确认', // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#ccc',
					success(res) {
						if (res.confirm) {
							that.getThreeList(newVal)
							let threeObj = that.formValue.threeObj
							let newObj = {}
							for (let key in threeObj) {
								let obj = threeObj[key]
								that.$set(obj, 'code', '')
								that.$set(obj, 'fileList', [])
								newObj[key] = obj
							}
							that.formValue.totalAmount = ''
							that.formValue.invoiceAmount = ''
							that.total = 0
							that.$set(that.formValue, 'threeObj', newObj)
						} else {
							that.$set(
								that.formValue,
								'secondId',
								that.oldSecondId
							)
						}
					},
				})
			}
			if (this.secondaryList.length > 0) {
				let name = ''
				this.secondaryList.forEach((item) => {
					if (item.id === newVal) {
						name = item.name
					}
				})
				this.formValue.secondName = name
			}
		},
	},
	watch: {
		'formValue.secondId': {
			handler(newVal, oldVal) {
				this.oldSecondId = oldVal
				if (newVal && !oldVal) {
					this.getThreeList(newVal)
				}
				if (this.secondaryList.length > 0) {
					let name = ''
					this.secondaryList.forEach((item) => {
						if (item.id === newVal) {
							name = item.name
						}
					})
					this.formValue.secondName = name
				}
			},
		},
		infoData(val) {
			//this.formValue = JSON.parse(JSON.stringify(val));
		},
		showAddInvoice(val) {
			if (val) {
				console.log('this.infoData:', this.infoData)
				let len = Object.keys(this.infoData)
				if (len.length > 0) {
					this.total = this.infoData.overAmount
						? this.infoData.overAmount
						: this.infoData.totalAmount
					this.formValue = {
						...this.infoData,
						threeObj: Object.keys(this.infoData.threeObj).reduce(
							(acc, cur) => {
								return this.infoData.threeObj[cur]
									? {
											...acc,
											[cur]: this.infoData.threeObj[cur],
									  }
									: acc
							},
							{}
						),
					}
				} else {
					this.total = 0
					this.formValue = {
						secondId: '',
						secondName: '',
						totalAmount: '',
						invoiceAmount: '',
						fileLength: 0,
						threeObj: {},
					}
					this.handlerAdd()
				}
				this.openPopup()
			} else {
				/* this.formValue = {
          secondId: "",
          secondName: "",
          totalAmount: "",
          fileLength: 0,
          threeObj: {},
        }; */
				this.$set(this.formValue, 'threeObj', {})
				this.secondaryList = []
				this.threeList = []
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 500rpx);
	display: flex;
	flex-direction: column;
}
.popup-contents {
	width: 100%;
	padding: 32rpx 0 32rpx 32rpx;
	margin-right: 20rpx;
	flex: 1;
	height: 0;
	box-sizing: border-box;
}
.bankContet {
	position: relative;
	.emtpy {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
	}
}
.title {
	font-size: 32rpx;
	line-height: 36rpx;
	margin-bottom: 20rpx;
}
.duo {
	width: 100%;
	height: 150rpx;
}
.disable {
	opacity: 0.3;
}

.addThree {
	font-size: 24rpx;
	line-height: 24rpx;
	.add {
		padding: 10rpx 28rpx;
		background: #4095e5;
		color: #fff;
		border-radius: 5rpx;
		margin-left: 6rpx;
	}
}
.delThree {
	height: 60rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
	border: 2rpx solid #ff6161;
	font-size: 28rpx;
	font-family:
		PingFang SC-Regular,
		PingFang SC;
	font-weight: 400;
	color: #ff6161;
	margin: 20rpx 0;
}
.primary-cancle {
	background: #efefef;
	color: #4b4b4b;
}
.fileList {
	font-size: 26rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	border: 1rpx solid #a8a2a2;
	padding: 10rpx 20rpx;
	.imgShow {
		padding: 20rpx 0;
		padding-right: 10rpx;
		width: 420rpx;
		.image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
		}
	}
	.fileName {
		margin-bottom: 5rpx;
	}
	.fileSize {
		font-size: 22rpx;
		color: #c5c5c7;
	}
	.delete {
		width: 32rpx;
		height: 32rpx;
		background: url('https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130846/ORG/182rbzcyd4lfc5wn12e665zik.png?timestamp=1688390969141')
			no-repeat center/100%;
	}
	.tagList {
		flex-wrap: wrap;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #f8f8f8;
	}
	.tags {
		padding: 5rpx 12rpx;
		border-radius: 5rpx;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ffa39e;
		background: #fff1f0;
	}
	.trfp {
		background: #e7f7ff;
		border: 1px solid #b1e2ff;
		color: #64aaff;
	}
	.ttbyz {
		background: #e6fffb;
		border: 1px solid #abdf98;
		color: #78cac6;
	}
	.yzcg {
		background: #f6ffed;
		border: 1px solid #b8e4fd;
		color: #81d376;
	}
	.fpyq {
		background: #fff2e8;
		border: 1px solid #ffd0b5;
		color: #fa5d39;
	}
	.fpysy {
		background: #f9f0ff;
		border: 1px solid #bbe1ff;
		color: #a28dda;
	}
	.yzsb {
		background: #fff1f0;
		border: 1px solid #ffbfbc;
		color: #f87880;
	}
	.fpcf {
		background: #f2f3fb;
		border: 1px solid #daddf4;
		color: #665ec0;
	}
	.fqyygfp {
		background: #fff0f6;
		border: 1px solid #ffc9e1;
		color: #ee67ab;
	}
}
.emptyAll {
	width: 100%;
	height: 24rpx;
}
.form-item-card {
	border: 2rpx solid #2e95ff;
	border-radius: 30rpx;
	width: 90%;
	padding: 10rpx 20rpx;
	padding-top: 30rpx;
}
.add-box {
	border: 1px solid #2e95ff;
	border-radius: 40rpx;
	width: 100%;
	height: 70rpx;
	line-height: 70rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	width: 95%;
	.add {
		color: #2e95ff;
		display: flex;
		align-items: center;
	}
}
.fee-box-bottom {
	border-bottom: 2rpx solid #ccc;
	margin-bottom: 20rpx;
}
.total-amount {
	border-left: 4rpx solid #979797;
	padding-left: 20rpx;
	font-size: 32rpx;
}
.w95 {
	width: 95%;
}
</style>
